<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<title></title>
</head>
<body>

<div id="wrap">

<jsp:include page="header.jsp"/>

<div class="center_content">

	<div class="left_content">
	
		<div class="title"><span class="title_icon"><img src="images/bullet1.gif"/></span>我的购物车</div>
		
		<div class="feat_prod_box_details">
		
			<s:if test="#session.indent != null">
			
				<table class="cart_table" id="tab">
				
						<tr class="cart_title">
							<!-- <th><label><input class="check-all check" type="checkbox"/>全选</label></th> -->
							<th>封面</th>
							<th>书名</th>
							<th>价格</th>
							<th>数量</th>
							<th>总价</th>
							<th>操作</th>
						</tr>
					<s:iterator value="#session.indent.itemList">
						
						<tr class="cart_title">
						<!--  <td class="checkbox"><input class="check-one check" type="checkbox"/></td>-->
							
							<td>
								<a href="detail.action?bookid=${book.id}">
									<img src="../${book.cover}" class="thumb" border="0"/>
								</a>
							</td>
							<td>${book.name}</td>
							<td>${book.price}</td>
							<td id="amount">
								<input class="min" name="" type="button" value="-" /> 
								<input class="text_box" name="" style="width:16px" type="text" value=${amount}> 
								<input class="add" name="" type="button" value="+" /> 
							</td>
							<td>${book.price * amount}</td>
							<td><button class="del">删除</button></td>
						</tr>			
					</s:iterator>
					
	          		<tr>
			            <td colspan="4" class="cart_total"><span class="red" >总价: </span></td>
			            <td id="sumPrice"><s:property value=""/></td>
	          		</tr>
	        	</table>
	        	
	        	<a href="order.action" class="checkout">提交订单</a> 
			
			</s:if>
			
			 <s:actionmessage/>
		
		</div>
		
		
		<div class="clear"></div>
	
	</div>
   
   	<s:action name="/book/index!right" executeResult="true"/>
   
	<div class="clear"></div>
	
</div>
<jsp:include page="footer.jsp"/>
</div>

<script type="text/javascript">
	function myfun() {
		var tableId = document.getElementById("tab"); 
		var str =0; 
		//应为table最后一行没有price价格左右获取不到，building报错,所以要-1
		for(var i=1;i<tableId.rows.length-1;i++) { 
			var everyAmountPrice = tableId.getElementsByTagName("tr")[i].getElementsByTagName("td")[4].innerHTML;
			str = str + parseFloat(everyAmountPrice);
			$("#sumPrice").html(str);
		} 
	}
	// 用js实现在加载完成一个页面后自动执行一个方法
	/*用window.onload调用myfun()*/
	window.onload=myfun;//

	
	
$(function(){ 
	$(".add").click(function(){ 
		var t=$(this).parent().find('input[class*=text_box]'); 
		t.val(parseInt(t.val())+1) 
		setTotal(); 
		var price=$(this).parent().prev().text(); 
		var amount = price*t.val();
		$(this).parent().next().html(amount);
		myfun();
	}) 
	
	$(".min").click(function(){ 
		$("#sumPrice").html("");
		var t=$(this).parent().find('input[class*=text_box]'); 
		t.val(parseInt(t.val())-1) 
		if(parseInt(t.val())<1){ 
			t.val(1); 
		} 
		setTotal(); 
		var price=$(this).parent().prev().text(); 
		var amount = price*t.val();
		$(this).parent().next().html(amount);
		myfun();
	}) 
	function setTotal(){ 
		var s=0; 
		$("#tab td").each(function(){ 
			s+=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text()); 
		}); 
			$("#total").html(s.toFixed(2)); 
		} 
		setTotal(); 
		
		$(".del").click(function(){
			 $(this).parent().parent().remove();
		});
}) 
</script>
</body>

</html>